<template>
	<view class="">

		<view class="body">
			<view class="top-container">
				<uni-list :border="false">
					<!-- <uni-list-item :border="false" title="执行者" :rightText="userInfo.name" /> -->
					<uni-list-item :border="false" title="单据编号" :rightText="header.billNo" />
					<uni-list-item :border="false" title="物料名称" :rightText="header.materialName" />
					<uni-list-item :border="false" title="数量" :rightText="String(header.qty)" />
					<!-- <uni-list-item :border="false" title="BOM版本"  :rightText="detail[0].fbomname" /> -->
					<uni-list-item :border="false" title="日期">
						<template v-slot:footer>
							<uni-dateformat :date="header.date" format="yyyy年MM月dd日">
							</uni-dateformat>
						</template>
					</uni-list-item>
				</uni-list>
			</view>

			<template v-if="needMoldList && needMoldList.length > 0">
				<view class="mold-section-title">所需模具</view>
				<uni-swipe-action-item class="" v-for="(item,index) in needMoldList" :key="index">
					<view class="panel">
						<view class="panel_content">
							<view class="panel_content_row">
								<view class="panel_content_row_item">
									<view class="panel_content_row_item_title">编码：</view>
									<view class="panel_content_row_item_value">{{ item.materialNo }}</view>
								</view>
								<view class="panel_content_row_item">
									<view class="panel_content_row_item_title">件号：</view>
									<view class="panel_content_row_item_value">{{ item.specification }}</view>
								</view>
							</view>
						</view>
						<view class="panel_content">
							<view class="panel_content_row">
								<view class="panel_content_row_item">
									<view class="panel_content_row_item_title">仓位：</view>
									<view class="panel_content_row_item_value">{{ item.locationNo }}</view>
								</view>
								<!-- 暂时没有材质，用单位代替 -->
								<view class="panel_content_row_item">
									<view class="panel_content_row_item_title">使用次数：</view>
									<view class="panel_content_row_item_value">{{ item.useCount }}</view>
								</view>
							</view>
						</view>
						<!-- 选择按钮 -->
						<view class="select-button-container">
							<button class="select-button" @click="selectMold(item)">领用</button>
						</view>
					</view>
				</uni-swipe-action-item>

			</template>

			<template v-if="moldList && moldList.length > 0">
				<view class="mold-section-title">领用模具</view>
				<uni-swipe-action-item class="" v-for="(item,index) in moldList" :left-options="options"
					@click="handleDelete(item)" :key="index">
					<view class="panel">
						<view class="panel_content">
							<view class="panel_content_row">
								<view class="panel_content_row_item">
									<view class="panel_content_row_item_title">模具编码：</view>
									<view class="panel_content_row_item_value">{{ item.materialNo }}</view>
								</view>
								<view class="panel_content_row_item">
									<view class="panel_content_row_item_title">物料名称：</view>
									<view class="panel_content_row_item_value">{{ item.materialName }}</view>
								</view>
							</view>
						</view>
						<view class="panel_content">
							<view class="panel_content_row">
								<view class="panel_content_row_item">
									<view class="panel_content_row_item_title">仓位：</view>
									<view class="panel_content_row_item_value">{{ item.locationNo }}</view>
								</view>
								<!-- 暂时没有材质，用单位代替 -->
								<view class="panel_content_row_item">
									<view class="panel_content_row_item_title">使用次数：</view>
									<view class="panel_content_row_item_value">{{ item.useCount }}</view>
								</view>
							</view>
						</view>

					</view>
				</uni-swipe-action-item>

			</template>
			<!-- <uni-empty-info v-else label="暂无模具信息"></uni-empty-info> -->

		</view>
		<!--  底部按钮  -->
		<view class="footerPanel">
			<view class="footerPanel_body">
				<button @click="pickScan" class="footerBtn scan" type="primary"><i
						class="iconfont icon-saomiao btn_icon"></i>扫码
				</button>

				<button @click="auditPickMold" class="footerBtn save"><i class="iconfont icon-duihao btn_icon"></i>审核
				</button>
			</view>
		</view>
		<!-- 获取托盘信息 -->
		<GetMold ref="moldRef" @success="getMoldSuccess"></GetMold>

		<!-- 扫描托盘 -->
		<tray-popup ref="trayPopupRef" @success="trayScanningScuess"></tray-popup>
	</view>
</template>

<script>
	import uniTransition from 'uni_modules/uni-transition/components/uni-transition/uni-transition.vue';
	import uniEmptyInfo from "../../vBase/components/uni-empty-info/uni-empty-info.vue"
	import {
		getProPlanDetailMold,
		getMold,
		deletePickMoldTemp,
		auditPickMold
	} from '@/utils/api.js'
	import GetMold from "../pop/get_mold.vue"
	import trayPopup from '../../components/popup/trayPopup.vue'

	export default {
		components: {
			GetMold,
			uniEmptyInfo,
			trayPopup
		},
		data() {
			return {
				billNo: '',
				loading: true,
				header: {},
				detail: [],
				needMoldList: [], //所需要的在库的模具
				moldList: [],
				moldData: {},
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#FF4E74'
					}
				}],
			}
		},
		methods: {
			//通过按钮领用模具
			selectMold(item) {
				let _this = this;
				getMold({
					locationNo: item.locationNo
				}).then(result => {
					if (result.statusCode == 200) {
						this.moldData = result.data.data.data ?? {}
						let param = {
							title: '模具信息',
							moldData: _this.moldData,
							header: _this.header
						}
						this.$refs.moldRef.open(param)


				 }
				})
			},
			/**
			 * 删除领用的模具
			 * @param {Object} e
			 */
			handleDelete(item) {
				const self = this
				uni.showModal({
					title: '提示',
					content: '是否删除？',
					success(res) {
						deletePickMoldTemp(item).then(res => {
							if (res.data.data) {
								uni.showToast({
									title: '删除成功',
									icon: 'none'
								})
							}
							self.initData()

						})
					}
				})
			},
			//添加成功后返回
			getMoldSuccess(e) {
				this.initData()
			},
			//审核模具领用
			auditPickMold() {
				let _this = this
				uni.showModal({
					title: '提示',
					content: '是否确认审核',
					success(res) {
						if (res.confirm) {
							auditPickMold({
								planData: _this.header,
								moldList: _this.moldList
							}).then(result => {
								if (result.data.data) {
									uni.showToast({
										title: '审核成功',
										icon: 'none'
									})
								}
								_this.initData()

							})

						}
					}
				})
			},



			//扫码成功后返回
			trayScanningScuess(e) {
				let _this = this;
				getMold({
					locationNo: e
				}).then(result => {
					if (result.statusCode == 200) {
						this.moldData = result.data.data.data ?? {}
						let param = {
							title: '模具信息',
							moldData: _this.moldData,
							header: _this.header
						}
						this.$refs.moldRef.open(param)


					}
				})
			},
			//扫码获取领料信息
			pickScan() {
				this.$refs.trayPopupRef.open()
			},
			// 获取详情数据
			initData() {
				getProPlanDetailMold({
					billNo: this.billNo
				}).then(res => {
					if (res.statusCode == 200) {
						this.header = res.data.data.data
						this.detail = res.data.data.dataList
						this.moldList = res.data.data.moldList
						this.needMoldList = res.data.data.needMoldList
					}
				})

			}
		},
		watch: {
			userInfo() {

			}
		},
		mounted() {
			this.initData()

		},
		onLoad(e) {
			this.billNo = e.billNo

		}
	}
</script>

<style lang="scss" scoped>
	@import "../../static/css/common";

	.mold-section-title {
		font-size: 16px;
		font-weight: bold;
		color: #333;
		padding: 10px 15px;
		background-color: #f5f5f5;
		border-bottom: 1px solid #ddd;
	}

	.select-button-container {
		position: absolute;
		top: 10px;
		right: 10px;
	}

	.select-button {
		font-size: 12px;
		padding: 2px 8px;
		height: 24px;
		line-height: 20px;
		border-radius: 4px;
		background-color: #007aff;
		color: #fff;
		border: none;
		min-width: 48px;
	}
</style>
